<template>

  <div>
    <Row>
      <Card>
        <div class="tabs">
          <ul class="my-ul">
            <li><a href="javascript:;">基本信息</a></li>
            <li><a href="javascript:;">地图展示</a></li>
          </ul>
        </div>
      </Card>
    </Row>

    <Row class="margin-top-10">
      <Card>
        <p slot="title">
          <Icon type="compose"></Icon>
          配送单详情
        </p>

        <Form :model="detail" :label-width="120">
          <Row>
            <Col span="7">
            <Form-item label="配送单编号">
              <Input v-model="input1"></Input>
            </Form-item>
            </Col>
            <Col span="7">
            <Form-item label="配送公司">
              <Input v-model="input1"></Input>
            </Form-item>
            </Col>
            <Col span="10">
            <Form-item label="配送公司地址">
              <Input v-model="input1"></Input>
            </Form-item>
            </Col>
          </Row>
          <Row>
            <Col span="7">
            <Form-item label="配送司机">
              <Select v-model="select" placeholder="请选择司机">
                <Option value="beijing">北京市</Option>
                <Option value="shanghai">上海市</Option>
                <Option value="shenzhen">深圳市</Option>
              </Select>
            </Form-item>
            </Col>
            <Col span="7">
            <Form-item label="司机电话">
              <Input v-model="input1"></Input>
            </Form-item>
            </Col>
            <Col span="7">
            <Form-item label="槽车车牌">
              <Input v-model="input1"></Input>
            </Form-item>
            </Col>
          </Row>

          <Row>
            <Col span="7">
            <Form-item label="押运员">
              <Select v-model="select" placeholder="请选择押运员">
                <Option value="beijing">北京市</Option>
                <Option value="shanghai">上海市</Option>
                <Option value="shenzhen">深圳市</Option>
              </Select>
            </Form-item>
            </Col>
            <Col span="7">
            <Form-item label="押运员电话">
              <Input v-model="input1"></Input>
            </Form-item>
            </Col>
          </Row>

          <Row>
            <Col span="7">
            <Form-item label="需求量">
              <Input v-model="input1"></Input>
            </Form-item>
            </Col>
          </Row>
          <Row>
            <Col span="7">
            <Form-item label="订单状态">
              <Select v-model="select" placeholder="请选择订单状态">
                <Option value="beijing">北京市</Option>
                <Option value="shanghai">上海市</Option>
                <Option value="shenzhen">深圳市</Option>
              </Select>
            </Form-item>
            </Col>
          </Row>

          <h4>关联订单</h4>

          <div class="text-right">
            <Button type="primary" @click.prevent.stop="showAddOrder()">增加关联单</Button>
            <Button type="primary" @click.prevent.stop="showMap()">配送路线</Button>

          </div>

          <div class="detail-list">
            <Timeline>
              <Timeline-item>
                <Table :columns="columns" :data="data1"></Table>
              </Timeline-item>
              <Timeline-item>
                <Table :columns="columns" :data="data1"></Table>
              </Timeline-item>
              <Timeline-item>
                <Table :columns="columns" :data="data1"></Table>
              </Timeline-item>
              <Timeline-item>
                <Table :columns="columns" :data="data1"></Table>
              </Timeline-item>
              <Timeline-item>
                <Table :columns="columns" :data="data1"></Table>
              </Timeline-item>
            </Timeline>
          </div>


          <ul class="detail-ul">
            <li>配送单生成时间：2017-07-19 10：28：10</li>
            <li>配送单提交时间：2017-07-19 10：46：29</li>
            <li>配送单发车时间：2017-07-20 12：46：29</li>
          </ul>

          <div class="text-center">
            <Button type="primary">提交</Button>
            <Button type="ghost" style="margin-left: 8px">取消</Button>
          </div>

        </Form>
      </Card>
    </Row>

    <!--新增关联订单-->
    <Modal
      v-model="showAddOrderModal"
      title="关联订单"
      width="700"
      @on-cancel="cancelAddOrderModal">

      <div>
        已关联订单: <span v-show="selection.length == 0">未选中</span>
        <ul class="my-ul" v-show="selection.length > 0">
          <li v-for="(item,index) in selection">{{item.name1}} <a href="#" class="my-red-text my-18-text my-va-ma"
                                                                  @click.prevent.stop="delSelectOrder(item,index)">
            <Icon type="ios-close-empty"></Icon>
          </a></li>
        </ul>
      </div>

      <Table size="small" height="380" :columns="columns1" :data="orderData" @on-selection-change="selectOrder"></Table>
    </Modal>

    <!--配送路线-->
    <Modal
      v-model="showMapModal"
      title="配送路线"
      width="700"
      @on-cancel="cancelMapModal">

      <div class="map-container">
        <div id="map"></div>
      </div>

      <ul class="my-ul my-map-select-list">
        <li>
          <div class="my-map-select-list-tag">1</div>
          <Select v-model="select" placeholder="请选择地址">
            <Option value="beijing">北京市</Option>
            <Option value="shanghai">上海市</Option>
            <Option value="shenzhen">深圳市</Option>
          </Select>
          <Icon type="arrow-right-c"></Icon>
        </li>
        <li>
          <div class="my-map-select-list-tag">2</div>
          <Select v-model="select" placeholder="请选择地址">
            <Option value="beijing">北京市</Option>
            <Option value="shanghai">上海市</Option>
            <Option value="shenzhen">深圳市</Option>
          </Select>
          <Icon type="arrow-right-c"></Icon>
        </li>
      </ul>

    </Modal>


    <div id="big-map"></div>
  </div>

</template>

<style scoped>
  #big-map{
    width: 100%;
    height: 800px;
  }
  .tabs{margin-bottom: 10px;}
  .tabs li{
    width: 80px;
    height: 30px;
    line-height: 30px;
    text-align: center;background: #589ee3;color: #fff;
  }
  .tabs li a{color: #fff;}
  .detail-list {
    border: 1px solid #ddd;
    padding: 26px;
    margin: 10px 0;
  }

  .ivu-timeline-item-tail {
    top: 50px;
  }

  .ivu-timeline-item-head-blue {
    top: 42px;
  }

  .detail-ul li {
    margin: 10px 0;
  }

  .ivu-form-item-content {
    margin-left: 0;
    text-align: center;
  }

  .my-ul li {
    display: inline-block;
    margin-right: 16px;
  }

  .map-container {
    width: 100%;
    height: 360px;
  }

  #map {
    height: 100%;
    width: 100%;
  }

  .my-map-select-list{width: 100%;}
  .my-map-select-list>li{width: 25%;}
  .my-map-select-list>li .ivu-select{width: 80%;}
  .my-map-select-list>li .ivu-icon{font-size: 30px;vertical-align: top;}
.my-map-select-list-tag{

  text-align: center;
  width: 20px;
  height: 20px;
  margin: 10px auto;
  background: #589ee3;
  border-radius: 50%;
  color: #fff;
  line-height: 20px;
}
</style>

<script type="text/ecmascript-6">

  import util from '@/libs/util';

  export default {
    data () {
      return {
        showAddOrderModal: false,
        showMapModal: false,
        detail: {},
        input1: '',
        select: '',
        columns: [
          {
            title: '需求单编号',
            key: 'name'
          },
          {
            title: '站点名称',
            key: 'name1'
          },
          {
            title: '需求量',
            key: 'name2'
          },
          {
            title: '预配送量',
            key: 'name3'
          },
          {
            title: '实际送达量',
            key: 'name4'
          },
          {
            title: '实际送达时间',
            key: 'name5'
          },
          {
            title: '站负责人',
            key: 'name6'
          },
          {
            title: '联系方式',
            key: 'name7'
          },
          {
            title: '站点地址',
            key: 'name8'
          },
        ],
        data1: [
          {
            name: 'XQ201708170001',
            name1: '乍浦LNG加气站',
            name2: '20m³',
            name3: '20m³',
            name4: '20m³',
            name5: '2017-08-20 13:12:41',
            name6: '李大宝',
            name7: '183000000',
            name8: '浙江省嘉兴市平湖市乍浦镇东方大道109号',
          }
        ],
        columns1: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: '需求订单号',
            key: 'name1'
          },
          {
            title: '站点名',
            key: 'name2'
          },
          {
            title: '需求量',
            key: 'name3'
          },
          {
            title: '需求时间',
            key: 'name4'
          },
          {
            title: '站点地址',
            key: 'name5'
          }
        ],
        orderData: [
          {
            name1: '121212112',
            name2: 'XXLNG加气站',
            name3: '8m³',
            name4: '2017-07-18 15:00',
            name5: '浙江省嘉兴市平湖市乍浦镇东方大道109号',
            _checked: false
          },
          {
            name1: '121212122',
            name2: 'XXLNG加气站',
            name3: '8m³',
            name4: '2017-07-18 15:00',
            name5: '浙江省嘉兴市平湖市乍浦镇东方大道109号',
            _checked: false
          },
          {
            name1: '121212123',
            name2: 'XXLNG加气站',
            name3: '8m³',
            name4: '2017-07-18 15:00',
            name5: '浙江省嘉兴市平湖市乍浦镇东方大道109号',
            _checked: false
          },
          {
            name1: '121212124',
            name2: 'XXLNG加气站',
            name3: '8m³',
            name4: '2017-07-18 15:00',
            name5: '浙江省嘉兴市平湖市乍浦镇东方大道109号',
            _checked: false
          },
        ],
        selection: [],
        map: null,
      }
    },
    watch: {
      selection(val){
        let $this = this;
        $this.orderData.forEach(function (e) {
          e._checked = false;
          val.forEach(function (g) {
            if (e.name1 == g.name1) {
              e._checked = true;
            }
          })
        })
      }
    },
    methods: {
      delSelectOrder(item, index){
        this.selection.splice(index, 1);
      },
      selectOrder(selection){
        this.selection = selection;
      },
      showAddOrder(){
        this.showAddOrderModal = true;
      },
      cancelAddOrderModal(){
        this.showAddOrderModal = false;
      },
      showMap(){
        let $this = this;
        $this.showMapModal = true;
        setTimeout(function () {
          $this.setMap();
        }, 200);
      },
      cancelMapModal(){
        this.map = null;
        this.showMapModal = false;
      },
      goBack () {
        this.$router.push({path: '/home'});
      },
      getList () {
        let $this = this;
        let params = {};
        $this.$emit('showLoading');
        api.fetchPost(api.path.in_theaters, params).then((data) => {
          //console.log(JSON.stringify(data));
          $this.$emit('hideLoading');
          data.subjects.forEach(function (e) {
            let item = {
              id: 0,
              title: '',
              rating: '',
            };
            item.id = e.id;
            item.title = e.title;
            item.rating = e.rating.average;
            $this.data1.push(item);
          });
        }).catch(err => {
          $this.$emit('hideLoading');
          $this.$Message.error(err);
        })
      },
      goToDetail(params){
        this.$router.push({path: `/movie/detail/${params.row.id}`});
      },
      setMap(){
        this.map = new BMap.Map("map");    // 创建Map实例
        this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
        var options = {
          renderOptions:{
            map:this.map,
            autoViewport:true
          },
          onSearchComplete: function(results){
            console.log(JSON.stringify(results));
          }
        };
        var driving = new BMap.DrivingRoute(this.map, options);
        driving.search("天安门", "百度大厦",{waypoints:['三里屯']});
      },
      setBigMap(){
        this.map = new BMap.Map("big-map");    // 创建Map实例
        this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
        this.map.enableScrollWheelZoom(true);

        var p1 = new BMap.Point(116.301934, 39.977552);
        var p2 = new BMap.Point(116.508328, 39.919141);

        var driving = new BMap.DrivingRoute(this.map, {renderOptions: {map: this.map, autoViewport: true}});
        driving.search(p1, p2, {waypoints: ["北京科技大学", "北京国际会议中心"]});//waypoints表示途经点

      }
    },
    beforeMount () {

    },
    mounted() {
      //this.getList();
      this.setBigMap();

    },
  };
</script>
